<template>
 <div class="container">
   <div style=" background-color: #fff;">
     <div class="container">
       <div class="left">
         <el-menu :default-active="defaultActive" active-text-color="#1890FF" router>
           <el-menu-item index="Integration"><span class="title">我的信息</span></el-menu-item>
           <el-menu-item index="balance"><span class="title">我的余额</span></el-menu-item>
           <el-menu-item index="address"><span class="title">我的地址</span></el-menu-item>
           <el-menu-item index="order"><span class="title">我的订单</span></el-menu-item>
           <el-menu-item index="coupon"><span class="title">我的优惠</span></el-menu-item>
         </el-menu>
       </div>
       <div class="rigth">
         <router-view></router-view>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  data() {
    return {
      defaultActive:this.$route.path.replace('/UserInfo/', '')
    }
  },
  computed: {

  },
  created() {
    if (!localStorage.getItem('TOKEN')) {
      Message.warning("请先登录~")
      this.$router.push({
        path: '/'
      })
    }
  },
  watch: {
    $route(to, from) {
      console.log(to)
      this.defaultActive = to.path.replace('/UserInfo/', '')
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  margin: 0px auto;
  min-height: 600px;
  display: flex;
}

.left {
  min-height: 600px;
  width: 132px;
  border: 1px solid gainsboro;
  float: left;
}

.rigth {
  min-height: 600px;
  width: 1010px;
  box-sizing: border-box;
  border-left: 0px;
  overflow: hidden;
  border-right: 1px solid gainsboro;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
}

.color {
  border-left: 2px solid #1890FF !important;
  color: #1890FF;
}

ul {
  list-style: none;
}

.el-menu {
  background-color: #FFFFFF;
  border-right: 0px solid transparent;
}

.el-menu-item:hover {
  background-color: #FFFFFF;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 15px;
}
</style>
